<template>
  <div class="social-activities">
    <div class="page-header">
      <h1>社交与活动</h1>
      <p class="subtitle">丰富多彩的社区活动，让生活更有趣</p>
    </div>

    <div class="activities-container">
      <!-- 活动日历 -->
      <div class="calendar-section">
        <h2>近期活动日历</h2>
        <div class="calendar-grid">
          <div class="activity-card upcoming">
            <div class="activity-date">
              <span class="day">15</span>
              <span class="month">六月</span>
            </div>
            <div class="activity-info">
              <h3>社区广场舞</h3>
              <p>每周固定活动，欢迎参加！</p>
              <div class="activity-meta">
                <span><font-awesome-icon icon="clock" /> 19:00-20:30</span>
                <span><font-awesome-icon icon="map-marker-alt" /> 社区广场</span>
              </div>
            </div>
            <button class="join-btn">报名参加</button>
          </div>

          <div class="activity-card">
            <div class="activity-date">
              <span class="day">18</span>
              <span class="month">六月</span>
            </div>
            <div class="activity-info">
              <h3>书法交流会</h3>
              <p>与书法爱好者交流心得</p>
              <div class="activity-meta">
                <span><font-awesome-icon icon="clock" /> 14:00-16:00</span>
                <span><font-awesome-icon icon="map-marker-alt" /> 文化室</span>
              </div>
            </div>
            <button class="join-btn">报名参加</button>
          </div>
        </div>
      </div>

      <!-- 在线课程 -->
      <div class="online-courses">
        <h2>精选在线课程</h2>
        <div class="course-grid">
          <div class="course-card">
            <div class="course-image">
              <font-awesome-icon icon="laptop" class="course-icon" />
            </div>
            <div class="course-content">
              <h3>智能手机使用技巧</h3>
              <p>学习使用智能手机的基本操作和实用功能</p>
              <div class="course-meta">
                <span><font-awesome-icon icon="users" /> 已有152人参加</span>
                <span><font-awesome-icon icon="star" /> 4.8分</span>
              </div>
              <button class="course-btn">开始学习</button>
            </div>
          </div>

          <div class="course-card">
            <div class="course-image">
              <font-awesome-icon icon="heart" class="course-icon" />
            </div>
            <div class="course-content">
              <h3>健康养生讲座</h3>
              <p>专业医生分享养生保健知识</p>
              <div class="course-meta">
                <span><font-awesome-icon icon="users" /> 已有98人参加</span>
                <span><font-awesome-icon icon="star" /> 4.9分</span>
              </div>
              <button class="course-btn">开始学习</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 兴趣小组 -->
      <div class="interest-groups">
        <h2>热门兴趣小组</h2>
        <div class="group-grid">
          <div class="group-card">
            <div class="group-icon">
              <font-awesome-icon icon="music" />
            </div>
            <h3>合唱团</h3>
            <p>每周二、四下午练习</p>
            <span class="member-count">35名成员</span>
            <button class="join-group-btn">加入小组</button>
          </div>

          <div class="group-card">
            <div class="group-icon">
              <font-awesome-icon icon="chess" />
            </div>
            <h3>棋牌室</h3>
            <p>随时欢迎来下棋</p>
            <span class="member-count">42名成员</span>
            <button class="join-group-btn">加入小组</button>
          </div>

          <div class="group-card">
            <div class="group-icon">
              <font-awesome-icon icon="paint-brush" />
            </div>
            <h3>绘画班</h3>
            <p>每周六上午创作</p>
            <span class="member-count">28名成员</span>
            <button class="join-group-btn">加入小组</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SocialActivities',
};
</script>

<style scoped>
.social-activities {
  padding: 40px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  font-size: 32px;
  color: #2c3e50;
  margin-bottom: 10px;
}

.subtitle {
  color: #6c757d;
  font-size: 18px;
}

.activities-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 40px;
}

/* 活动日历样式 */
.calendar-section h2,
.online-courses h2,
.interest-groups h2 {
  color: #2c3e50;
  margin-bottom: 25px;
  font-size: 24px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.activity-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.activity-card:hover {
  transform: translateY(-5px);
}

.activity-card.upcoming {
  border-left: 4px solid #42b983;
}

.activity-date {
  text-align: center;
  min-width: 60px;
}

.activity-date .day {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  display: block;
}

.activity-date .month {
  font-size: 14px;
  color: #6c757d;
}

.activity-info {
  flex: 1;
}

.activity-info h3 {
  color: #2c3e50;
  margin-bottom: 5px;
  font-size: 18px;
}

.activity-info p {
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 10px;
}

.activity-meta {
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: #6c757d;
}

.activity-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.join-btn {
  background: #42b983;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 14px;
}

.join-btn:hover {
  background: #3aa876;
}

/* 在线课程样式 */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.course-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.course-card:hover {
  transform: translateY(-5px);
}

.course-image {
  height: 160px;
  background: #e3f2fd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-icon {
  font-size: 48px;
  color: #1976d2;
}

.course-content {
  padding: 20px;
}

.course-content h3 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 18px;
}

.course-content p {
  color: #6c757d;
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 1.6;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 15px;
}

.course-btn {
  width: 100%;
  background: #1976d2;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.course-btn:hover {
  background: #1565c0;
}

/* 兴趣小组样式 */
.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.group-card {
  background: white;
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.group-card:hover {
  transform: translateY(-5px);
}

.group-icon {
  width: 60px;
  height: 60px;
  background: #e3f2fd;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #1976d2;
  font-size: 24px;
}

.group-card h3 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 18px;
}

.group-card p {
  color: #6c757d;
  margin-bottom: 15px;
  font-size: 14px;
}

.member-count {
  display: block;
  color: #6c757d;
  font-size: 14px;
  margin-bottom: 15px;
}

.join-group-btn {
  background: #42b983;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 14px;
  width: 100%;
}

.join-group-btn:hover {
  background: #3aa876;
}

@media (max-width: 768px) {
  .social-activities {
    padding: 20px;
  }

  .calendar-grid,
  .course-grid,
  .group-grid {
    grid-template-columns: 1fr;
  }

  .activity-card {
    flex-direction: column;
    text-align: center;
  }

  .activity-meta {
    justify-content: center;
  }

  .activity-date {
    margin: 0 auto;
  }
}
</style>